<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .el-tag + .el-tag {
            margin-left: 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <div id="div">
        <h1>学生姓名如下：</h1>
        <el-tag
                :key="tag"
                v-for="(tag,index) in dynamicTags"
                closable
                :type="index==roll?'danger':''"
                :disable-transitions="false"
                @close="handleClose(tag)">
            {{tag}}
        </el-tag>
        <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">添加学生</el-button>


        <el-button type="primary" @click="goOnCallRoll" v-html="inputText"></el-button>
    </div>
</body>
<script>

   let vue = new Vue({
        el:"#div",
        data:{
            dynamicTags: [],
            inputVisible: false,
            inputValue: '',
            roll:5,
            inputText:"开始点名",
            isStart:true,
            setInterval_id:""
        },

        created:function () {
            this.findAllStuNames();
        },

        methods: {
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';

                //ajax请求添加数据到数据库
                axios.get("student/addStudent",{"params":{"stuName":inputValue}});

            },
            findAllStuNames:function () {
                axios.get("student/findAllStudentNames")
                    .then(response=>{
                        this.dynamicTags=response.data.data;
                    })

            },
            goOnCallRoll:function () {


                if(this.isStart){
                    //开始
                    this.isStart = false;
                    this.inputText = "停止";
                    this.setInterval_id = setInterval(function () {
                        vue.$data.roll=randomNum(0,vue.$data.dynamicTags.length);
                    },200)
                }else{
                    //停止
                    this.isStart = true;
                    clearInterval(this.setInterval_id);
                    this.inputText = "开始点名";

                }


            }
        }

    });

    function randomNum(minNum,maxNum) {
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }
</script>
</html>